<template>
	<view style="height: 400rpx;"><qiun-data-charts type="column" :opts="opt" :chartData="chartData" background="none" /></view>
</template>

<script>
export default {
	props: {
		bank: {
			type: Array | Object,
			default() {
				return null;
			}
		}
	},
	data() {
		return {
			chartData: {}
		};
	},
	watch: {
		bank(newValue, oldValue) {
			this.init();
		}
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			if (this.bank) {
				let chartData = {
					categories: this.bank.map(i => {
						return i.bankType;
					}), // 累积金额
					series: [
						{
							name: '余额',
							data: this.bank.map(i => {
								return i.balance;
							})
						}
					]
				};
				this.chartData = chartData;
			} else {
				this.chartData = {};
				console.error('工资专户', '银行专户余额无数据');
			}
		}
	},
	computed: {
		opt() {
			return {
				enableScroll: true,
				legend: {
					show: false
				},
				xAxis: {
					disabled: false,
					axisLine: true,
					axisLineColor: '#CCCCCC',
					calibration: false,
					fontColor: '#666666',
					fontSize: 10,
					rotateLabel: false,
					itemCount: 4,
					boundaryGap: 'center',
					disableGrid: true,
					gridColor: '#CCCCCC',
					gridType: 'solid',
					gridEval: 1,
					scrollShow: true,
					scrollAlign: 'left',
					scrollColor: '#A6A6A6',
					scrollBackgroundColor: '#EFEBEF'
				},
			};
		}
	}
};
</script>

<style></style>
